@keyframes fadeIn{
  0%{ opacity: 0; }
}

.alert{
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; font-size:15px; z-index: 11;
  background: rgba(50,50,50,.7); display: flex; align-items: center; justify-content: center;
  .center{
    border-radius: 10px; padding:20px; line-height: 1.5;
    margin:auto;background: white; text-align: center; box-sizing: border-box;
    width:78%; min-height: 100px; box-shadow: 0 4px 10px rgba(50,50,50,.3);
    // animation: fadeIn 0.3s;
  }
  .bottom{
    position: absolute; left:0; right:0; bottom: 0; background: white; min-height: 10vh; border-radius: 14px 14px 0 0; 
    max-height: 96vh; overflow: auto;
    // animation: fadeIn .2s;
  }
  .top{
    position: absolute; left:0; right:0; top: 0;background: white;
  }
}
.alert.nobg{
  background-color: transparent;
  .bottom{
    background-color: #ECEFF0; border: solid 1px #dbdbdb; border-bottom: 0;
  }
}